<template>
	<view class="page">
		<app-header></app-header>
		<!-- 顶部操作栏 -->
		<view class="top-optera"></view>
		
		<!-- header -->
		<view class="pt-custom header">
			<!-- header -->
			<view class="flex-end"><navigator open-type="navigate" hover-class="none" url="./setting" class="radius">设置</navigator></view>

			<view class="flex-vcenter ml mt-small">
				<view>image</view>
				<view class="ml-small">
					<view>name</view>
					<view>des</view>
				</view>
			</view>

			<view class="flex-end mt-small">
				<view class="radius bi">
					<uni-icons type="locked" size="15" color="#f0f0f0"></uni-icons>
					<navigator open-type="navigate" hover-class="none" url="./coin" class="ml-xsmall nav">币</navigator>
				</view>
			</view>

			<view class="flex-end mt-xsmall">
				<view class="radius qiandao">
					<uni-icons type="map-pin" size="15" color="#fff"></uni-icons>
					<uni-icons type="paperplane" size="15" color="#fff"></uni-icons>
					<navigator open-type="navigate" hover-class="none" url="./coin" class="ml-xsmall nav">签到</navigator>
				</view>
			</view>

			<!-- 信息 -->
			<view class="space-around mt-xsmall info">
				<navigator open-type="navigate" hover-class="none" url="./attention" class="flex-columns">
					<view class="flex-center">0</view>
					<view class="flex-center">关注</view>
				</navigator>
				<navigator open-type="navigate" hover-class="none" url="./fans" class="flex-columns">
					<view class="flex-center">0</view>
					<view class="flex-center">粉丝</view>
				</navigator>
				<navigator open-type="navigate" hover-class="none" url="./favorites" class="flex-columns">
					<view class="flex-center">0</view>
					<view class="flex-center">收藏</view>
				</navigator>
			</view>
		</view>

		<!-- my -->
		<view class="flex-row space-around my">
			<navigator open-type="navigate" hover-class="none" url="./createParty" class="flex-columns">
				<view class="flex-center"><uni-icons type="personadd" size="30"></uni-icons></view>
				<view class="flex-center">我的组局</view>
			</navigator>
			<navigator open-type="navigate" hover-class="none" url="./participation" class="flex-columns">
				<view class="flex-center"><uni-icons type="personadd-filled" size="30"></uni-icons></view>
				<view class="flex-center">参与的局</view>
			</navigator>
			<navigator open-type="navigate" hover-class="none" url="./dynamic" class="flex-columns">
				<view class="flex-center"><uni-icons type="contact" size="30"></uni-icons></view>
				<view class="flex-center">我的动态</view>
			</navigator>
			<navigator open-type="navigate" hover-class="none" url="./coin" class="flex-columns">
				<view class="flex-center"><uni-icons type="locked" size="30"></uni-icons></view>
				<view class="flex-center">我的T币</view>
			</navigator>
		</view>
	</view>
</template>

<script>
import uniIcons from '@/components/uni-icons/uni-icons.vue';
import AppHeader from '@/components/PlusHeader/index.vue';
export default {
	components: { uniIcons, AppHeader }
};
</script>

<style>
.header {
	background: red;
	color: #fff;
}

.radius {
	border-radius: 20rpx 0 0 20rpx;
	padding: 0 40rpx 0 20rpx;
}

.bi {
	background: rgba(241, 199, 9, 0.2);
}

.qiandao {
	background: rgba(1, 1, 1, 0.2);
}

.info {
	background: rgba(0, 0, 0, 0.2);
	padding: 40rpx 0;
}

.my {
	padding: 40rpx 0;
	background: #fff;
}

.nav {
	display: inline;
}
</style>
